<template>
<div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6" >
        <div class="grid-content ep-bg-purple"/>
        <div>
          <div>
            <el-card shadow="always" class="el-card_ba1">
              <div class="coll_title">销售额</div>
              <div class="fz_28">
                <span style="color: #c26e3c">$ </span>
                {{ orderData.age }} (元)
              </div>
            </el-card>
          </div>
        </div>
        </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" />
        <div>
          <div>
            <el-card shadow="always" class="el-card_ba2">
              <div class="coll_title">利润</div>
              <div class="fz_28">
                <span style="color: #ec8547">$ </span>
                {{ orderData.profit_age }} (元)
              </div>
            </el-card>
          </div>
        </div>
        </el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" />
        <div>
          <div>
            <el-card shadow="always" class="el-card_ba3">
              <div class="coll_title">成交数</div>
              <div class="fz_28">
                <span style="color: #ec8547">$ </span>
                {{ orderData.total }} (笔)
              </div>
            </el-card>
          </div>
        </div>
        </el-col>
      <el-col :span="6"><div class="grid-content ep-bg-purple" />
        <div>
          <div>
            <el-card shadow="always" class="el-card_ba4">
              <div class="coll_title">平均利润(每斤)</div>
              <div class="fz_28">
                <span style="color: #ec8547">$ </span>
                <span v-if="orderData.data" >{{ (orderData.data).toFixed(2) }}</span>元
              </div>
            </el-card>
          </div>
        </div>
        </el-col>
    </el-row>
  </div>
  <div class="mag_t-20">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content ep-bg-purple"/>
        <div>
          <el-card shadow="always">
            <div>
                <div class="coll_title">销售趋势</div>
                <div>
                  <eCharts_销售折线图 style="width: 99%;height: 350px"></eCharts_销售折线图>
                </div>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content ep-bg-purple"/>
        <div style="width: 100%">
          <el-card shadow="always">
            <div class="coll_title">销售数据</div>
            <div>
              <eCharts_基础折线图 style="width: 99%;height: 350px"></eCharts_基础折线图>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
  <div class="mag_t-20">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="grid-content ep-bg-purple"/>
          <div>
            <el-card shadow="always">
              <div class="coll_title">销售数据</div>
              <div>
                <eCharts_饼图 style="width: 99%;height: 350px"></eCharts_饼图>
              </div>
            </el-card>
          </div>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-card shadow="always">
              <div class="coll_title">已完成本月目标销售额</div>
              <div>
                <targetChart style="width: 99%;height: 350px"></targetChart>
              </div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="always">
              <div class="coll_title">已完成本月目标利润</div>
              <div>
                <ageChart style="width: 99%;height: 350px"></ageChart>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</div>
</template>
<script setup lang="ts">
// 引入pinia
import {storeVuex} from  '@/store/modules/user'
const userStore = storeVuex();
//模拟数据value的字段对应Y轴，name字段对应X轴
import {onMounted, reactive, ref} from "vue";
import eCharts_饼图 from "@/components/echarts/eCharts_饼图.vue";
import eCharts_基础折线图 from '@/components/echarts/eCharts_基础折线图.vue'
import eCharts_销售折线图 from '@/components/echarts/eCharts_销售折线图.vue'
import targetChart from '@/components/echarts/targetChart.vue'
import ageChart from '@/components/echarts/ageChart.vue'
import {order} from "@/api";
import {ElMessage} from "element-plus";
// 销售数据
let orderData = ref({})
let echartsData = reactive([])
onMounted(() => {
  getSaleData();
});
const getSaleData = async ()=>{
  const res= await order.getOrderData({
    shop_id:userStore.userType_id
  })
  ElMessage({
    message: res.data.msg,
      type: res.data.status==1?'success':'error'
  })
  orderData.value = res.data.data.data.Data[0]
  echartsData = res.data.data.data.echartsData
}
</script>
<style scoped>
.chart{
  height: 300px;
}
.el-card_ba1{
  background-image: linear-gradient(136deg, #CE9FFC 0%, #7367F0 100%);
  border-radius: 10px;
  color: white;
}
.el-card_ba2{
  background-image: linear-gradient(135deg,
  #43CBFF 0%, #9708CC 100%);
  border-radius: 10px;
  color: white;
}
.el-card_ba3{
  background-image: linear-gradient(135deg, #FCCF31 0%, #F55555 100%);
  border-radius: 10px;
  color: white;
}
.el-card_ba4{
  background-image: linear-gradient(136deg, #F97794 0%, #623AA2 100%);
  border-radius: 10px;
  color: white;
}
</style>
